.search {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 20;
    width: 100%;

    @media (max-width: 640px) {
        margin-right: 0;
    }

    & input {
        border: none;
        width: 100%;
        height: 32px;
        padding: 0 25px 0 34px;
        background-color: transparent;
        text-overflow: ellipsis;

        @media (prefers-color-scheme: dark) {
            color: var(--gray300);
        }

        &::placeholder {
            color: var(--gey6a);

            @media (prefers-color-scheme: dark) {
                color: var(--gray700);
            }
        }

        &:focus {
            outline: none;
        }
    }

    &__clear {
        border: none;
        background-color: transparent;
        cursor: pointer;
        position: absolute;
        left: -8px;
        top: calc(50% - 13px);

        &:focus {
            outline: none;
        }
    }

    &__cross {
        width: 24px;
        height: 24px;
        color: var(--gray700);

        @media (prefers-color-scheme: dark) {
            color: var(--gray400);
        }
    }

    &__ico {
        width: 24px;
        height: 24px;
        color: var(--gray700);
        position: absolute;
        left: 0;
        top: calc(50% - 12px);
    }

    &__arrow-up {
        transform: rotate(180deg);
    }

    &__btn {
        cursor: pointer;
        outline: none;
        background-color: transparent;
        border: 0;
    }
}

.light-mode {
    .search {
        & input {
            color: var(--gray-base);

            &::placeholder {
                color: var(--gey6a);
            }
        }

        &__cross {
            color: var(--gray700);
        }
    }
}

.dark-mode {
    .search {
        & input {
            color: var(--gray300);

            &::placeholder {
                color: var(--gray700);
            }
        }

        &__cross {
            color: var(--gray400);
        }
    }
}
